<template>
  <div class="container">
    <div style="border: 1px solid #eceeef; ">
      <el-form :model="form" label-width="120px" :inline="true" class="form_class w430">
        <el-form-item label="确定产品类型:">
          <el-select v-model="form.productType" placeholder="请选择">
            <el-option v-for="item in product_type" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-checkbox v-model="form.rememberSelection">记住选择</el-checkbox>
        </el-form-item> -->
      </el-form>

      <!-- <div class="">
        <p style="text-align:center">此产品类型支持以下平台发布</p>
        <div class="line"></div>
        <div class="platform-icons">
          <img v-for="(icon, index) in platformIcons" :key="index" :src="icon" alt="平台图标" />
        </div>
      </div> -->


      <!-- <div class="platforms">
        <span style="text-align:center">此产品类型支持以下平台发布</span>
        <div class="platform-icons">
          <img v-for="(icon, index) in platformIcons" :key="index" :src="icon" alt="平台图标" />
        </div>
      </div> -->

      <!-- <el-form :model="form" label-width="120px" :inline="true" class="form_class w600">
        <el-form-item>
          <el-checkbox v-model="form.mergeData">合并单个数据包中所有系列数据</el-checkbox>
          <span class="note">(说明)</span>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="form.compressImages">对大于3MB的图片进行图片压缩</el-checkbox>
          <span class="note">(说明)</span>
        </el-form-item>
      </el-form> -->
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      form: {
        productType: "",
        rememberSelection: false,
        mergeData: false,
        compressImages: false,
      },
      product_type: [],
      productTypes: [
        { value: "手机壳", label: "手机壳" },
        { value: "其他", label: "其他" },
      ],
      platformIcons: [
        "path/to/icon1.png",
        "path/to/icon2.png",
        "path/to/icon3.png",
        "path/to/icon4.png",
        "path/to/icon5.png",
        "path/to/icon6.png",
        "path/to/icon7.png",
        "path/to/icon8.png",
        "path/to/icon9.png",
      ],
    };
  },
  created() {
    this.getDicts("product_type").then(response => {
      this.product_type = response.data;
    });
  },
  methods: {
    handleEmitData() {
      if (!this.form.productType) {
        this.$message.error('请选择产品类型')
        return false
      }
      const productName = this.product_type.filter(item => this.form.productType == item.dictValue)[0].dictLabel
      this.$emit('send', { productType: this.form.productType, productName });
      return true
    },
    nextStep() {
      this.activeStep++;
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
}

.form_class {
  margin: 50px auto;
}

.w430 {
  width: 430px;
}

.w600 {
  width: 600px;
}

.platforms {
  margin-top: 20px;
  border-top: 1px solid #ebeef5;
  padding-top: 20px;
}

.line {
  width: 40%;
  margin: 10px auto;
  height: 1px;
  background-color: #e5e5e5;

}

.platform-icons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.note {
  color: #909399;
  margin-left: 5px;
}

.buttons {
  margin-top: 20px;
  text-align: right;
}
</style>